<template>
  <vab-dialog v-model="isShowDialog" :close-on-click-modal="true" show-fullscreen width="30%">
    <template #default>
      <el-scrollbar>
        <el-row class="posirow" :gutter="24">
          <div class="treeContent" :style="'width:' + treeWidth">
            <div class="footer" style="padding-left: 20px">
              <el-button type="primary" @click="handleSave">保 存</el-button>
              <el-button @click="handleClose">取 消</el-button>
            </div>
            <CommonVxeTableTree
              v-if="curRoleId"
              ref="treeRef"
              style="margin-top: 20px; margin-bottom: 20px"
              :config="{ expandAll: true, checkStrictly: true, type: 'checkbox', maxHeight: dialogHeight }"
              :url="'system/role/queryMenuRes/' + curRoleId"
            />
          </div>
        </el-row>
      </el-scrollbar>
    </template>
  </vab-dialog>
</template>

<script setup lang="tsx" name="RoleAuth">
import VabDialog from "@/plugins/VabDialog/index.vue";
import { postRequest, backTableHeight } from "@/api/mains";
import { succMsg } from "@/utils/MessageUtils";
import CommonVxeTableTree from "@/plugins/tree/CommonVxeTableTree.vue";
import { ref } from "vue";

const isShowDialog = ref(false);
const curRoleId = ref("");
const roleName = ref("");
const activeName = ref("");
const dialogHeight = ref(backTableHeight() + 150);
const treeWidth = ref(document.documentElement.clientWidth * 0.88 + "px");

const treeRef = ref();

//显示
const showDialog = (row: any) => {
  activeName.value = "user";
  curRoleId.value = row.id;
  roleName.value = row.roleName;
  isShowDialog.value = true;
};

//关闭抽屉窗口
const handleClose = () => {
  isShowDialog.value = false;
  activeName.value = "";
};

//菜单授权
const handleSave = async () => {
  const checknodes = treeRef.value.getCheckedKeys();
  const menuIds: any[] = [];
  if (checknodes.length > 0) {
    // const getStr = function (list: any) {
    //   list.forEach(function (row: any) {
    //     menuIds.push(row.id);
    //   });
    // };
    // getStr(checknodes);
    checknodes.forEach(function (row: any) {
      menuIds.push(row.id);
    });
  }
  // menuResLoading.value = true;
  const { code, msg } = await postRequest("system/role/authMenuRes", {
    roleId: curRoleId.value,
    menuIds: menuIds
  });
  // menuResLoading.value = false;
  if (code == 200) {
    succMsg(msg);
    handleClose();
  }
};

// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
  showDialog
});
</script>
<style lang="scss" scoped>
:deep(.el-card__body) {
  padding: 0;
}
:deep(.el-dialog__body) {
  padding-top: 5px;
  padding-bottom: 0;
}
:deep(.el-dialog__footer) {
  padding-top: 0;
  padding-bottom: 20px;
}
</style>
